<%--
  Created by IntelliJ IDEA.
  User: swg
  Date: 2017/10/8
  Time: 19:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/includes.jsp" %>

<html>
<head>
    <meta charset="utf-8">
    <title>snail 个人博客</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/front/css/bootstrap.min.css">

    <link href="${pageContext.request.contextPath}/static/front/css/base.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/front/css/index.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/bootstrap/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/front/js/sliders.js"></script>
    <script src="${pageContext.request.contextPath}/static/front/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap-paginator.min.js"></script>
    <style>
        .pagination {
            margin: 20px 0;
        }

        .pagination ul {
            display: inline-block;
            *display: inline;
            margin-bottom: 0;
            margin-left: 0;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            *zoom: 1;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .pagination ul > li {
            display: inline;
        }

        .pagination ul > li > a,
        .pagination ul > li > span {
            float: left;
            padding: 4px 12px;
            line-height: 20px;
            text-decoration: none;
            background-color: #ffffff;
            border: 1px solid #dddddd;
            border-left-width: 0;
        }

        .pagination ul > li > a:hover,
        .pagination ul > li > a:focus,
        .pagination ul > .active > a,
        .pagination ul > .active > span {
            background-color: #f5f5f5;
        }

        .pagination ul > .active > a,
        .pagination ul > .active > span {
            color: #999999;
            cursor: default;
        }

        .pagination ul > li:first-child > a,
        .pagination ul > li:first-child > span {
            border-left-width: 1px;
            -webkit-border-bottom-left-radius: 4px;
            border-bottom-left-radius: 4px;
            -webkit-border-top-left-radius: 4px;
            border-top-left-radius: 4px;
            -moz-border-radius-bottomleft: 4px;
            -moz-border-radius-topleft: 4px;
        }

        .pagination ul > li:last-child > a,
        .pagination ul > li:last-child > span {
            -webkit-border-top-right-radius: 4px;
            border-top-right-radius: 4px;
            -webkit-border-bottom-right-radius: 4px;
            border-bottom-right-radius: 4px;
            -moz-border-radius-topright: 4px;
            -moz-border-radius-bottomright: 4px;
        }

        .pagination-centered {
            text-align: center;
        }

        .pagination-right {
            text-align: right;
        }

        .pagination-large ul > li > a,
        .pagination-large ul > li > span {
            padding: 11px 19px;
            font-size: 17.5px;
        }

        .pagination-large ul > li:first-child > a,
        .pagination-large ul > li:first-child > span {
            -webkit-border-bottom-left-radius: 6px;
            border-bottom-left-radius: 6px;
            -webkit-border-top-left-radius: 6px;
            border-top-left-radius: 6px;
            -moz-border-radius-bottomleft: 6px;
            -moz-border-radius-topleft: 6px;
        }

        .pagination-large ul > li:last-child > a,
        .pagination-large ul > li:last-child > span {
            -webkit-border-top-right-radius: 6px;
            border-top-right-radius: 6px;
            -webkit-border-bottom-right-radius: 6px;
            border-bottom-right-radius: 6px;
            -moz-border-radius-topright: 6px;
            -moz-border-radius-bottomright: 6px;
        }

        .pagination-mini ul > li:first-child > a,
        .pagination-small ul > li:first-child > a,
        .pagination-mini ul > li:first-child > span,
        .pagination-small ul > li:first-child > span {
            -webkit-border-bottom-left-radius: 3px;
            border-bottom-left-radius: 3px;
            -webkit-border-top-left-radius: 3px;
            border-top-left-radius: 3px;
            -moz-border-radius-bottomleft: 3px;
            -moz-border-radius-topleft: 3px;
        }

        .pagination-mini ul > li:last-child > a,
        .pagination-small ul > li:last-child > a,
        .pagination-mini ul > li:last-child > span,
        .pagination-small ul > li:last-child > span {
            -webkit-border-top-right-radius: 3px;
            border-top-right-radius: 3px;
            -webkit-border-bottom-right-radius: 3px;
            border-bottom-right-radius: 3px;
            -moz-border-radius-topright: 3px;
            -moz-border-radius-bottomright: 3px;
        }

        .pagination-small ul > li > a,
        .pagination-small ul > li > span {
            padding: 2px 10px;
            font-size: 11.9px;
        }

        .pagination-mini ul > li > a,
        .pagination-mini ul > li > span {
            padding: 0 6px;
            font-size: 10.5px;
        }
    </style>


    <script>
        var PAGESIZE = 10;
        function changePageSize(_obj) {
            PAGESIZE = $(_obj).val();
            buildTable("",1,PAGESIZE)
        }

        var options = {
            currentPage: 1,  //当前页数
            totalPages: 10,  //总页数，这里只是暂时的，后头会根据查出来的条件进行更改
            size:"normal",
            alignment:"center",
            itemTexts: function (type, page, current) {
                switch (type) {
                    case "first":
                        return "第一页";
                    case "prev":
                        return "前一页";
                    case "next":
                        return "后一页";
                    case "last":
                        return "最后页";
                    case "page":
                        return  page;
                }
            },
            onPageClicked: function (e, originalEvent, type, page) {
                var name = $("#textInput").val(); //取内容
                buildTable(name,page,PAGESIZE);//默认每页最多10条
            }
        }

        //获取当前项目的路径
        var urlRootContext = (function () {
            var strPath = window.document.location.pathname;
            var postPath = strPath.substring(0, strPath.substr(1).indexOf('/') + 1);
            return postPath;
        })();

        //生成表格
        function buildTable(name,pageNumber,pageSize,currentPageNumber) {
            var url =  "${pageContext.request.contextPath}/articleManager/showAllArticleInfo"; //请求的网址
            var reqParams = {'name':name, 'pageNumber':pageNumber,'pageSize':pageSize};//请求数据
            $(function () {
                $.ajax({
                    type:"POST",
                    url:url,
                    data:reqParams,
                    async:false,
                    dataType:"json",
                    success: function(data){
                        $("#pageCount").empty();
                        $("#pageCount").append("共"+data.data.pages+"页")
                        if(data) {
                            var newoptions = {
                                currentPage: currentPageNumber,  //当前页数
                                totalPages: data.data.pages==0?1:data.data.pages,  //总页数
                                size:"normal",
                                alignment:"center",
                                itemTexts: function (type, page, current) {
                                    switch (type) {
                                        case "first":
                                            return "第一页";
                                        case "prev":
                                            return "前一页";
                                        case "next":
                                            return "后一页";
                                        case "last":
                                            return "最后页";
                                        case "page":
                                            return  page;
                                    }
                                },
                                onPageClicked: function (e, originalEvent, type, page) {
                                    var name = $("#textInput").val(); //取内容
                                    var currentPageNumber ;
                                    switch (type) {
                                        case "prev":
                                            currentPageNumber = page + 1;
                                            break;
                                        case "next":
                                            currentPageNumber = page - 1;
                                            break;
                                    }
                                    buildTable(name,page,PAGESIZE,currentPageNumber);//默认每页最多10条
                                }
                            }
                            $('#bottomTab').bootstrapPaginator("setOptions",newoptions); //重新设置总页面数目
                            var dataList = data.data.dataList;
                            $("#blogs").empty();//清空表格内容
                            if (dataList.length > 0 ) {
                                $(dataList).each(function(){//重新生成
                                    $("#blogs").append('<div class="blogs" name="articles" style="padding-bottom:20px;"><figure><img src="http://swg2018.oss-cn-beijing.aliyuncs.com/'+this.articleImageUrl+'" style="width: 167px;height: 136px;margin-bottom: 20px;"></figure><ul><h3><a href="${pageContext.request.contextPath}/front/detail/'+this.id+'">'+this.articleTitle+'</a></h3><li>'+this.content+'</li><span class="autor"><span class="lm f_l"><a href="/">'+this.columnName+'</a></span><span class="dtime f_l">'+new Date(this.createDate).toLocaleDateString()+'</span></span></div>');

                                });
                                var articles = document.getElementsByName("articles");
                                for(var i=0;i<articles.length;i++){
                                    var p = $(".topnews div:eq("+i+") ul li p").text();
                                    var limit = 90;
                                    if(p.length > limit ){
                                        p = p.substring(0,limit)+"......";
                                    }
                                    $(".topnews div:eq("+i+") ul li p:first").siblings().remove();
                                    $(".topnews div:eq("+i+") ul li p").text(p);
                                }
                            } else {
                                $("#tableBody").append('<tr><th colspan ="8"><center>查询无数据</center></th></tr>');
                            }
                        }else{
                            alert("----"+data.status);
                        }
                    },
                    error: function(e){
                        alert("查询失败");
                    }
                });
            });
        }

        //渲染完就执行
        $(function() {
            $('#myCarousel').carousel({interval:5000});//每隔5秒自动轮播
            //生成底部分页栏
            $('#bottomTab').bootstrapPaginator(options);

            buildTable("",1,10);//默认空白查全部

            //创建结算规则
            $("#queryButton").bind("click",function(){
                var name = $("#textInput").val();
                buildTable(name,1,PAGESIZE);
            });
        });

        function del() {
            var msg = "该操作不可恢复，请确认！！";
            if (confirm(msg)==true){
                return true;
            }else{
                return false;
            }
        };

    </script>

</head>
<body>
<!-- 头 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="${pageContext.request.contextPath}/front/welcome">蜗牛生活</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="${pageContext.request.contextPath}/front/index">首页</a></li>
                <li><a href="${pageContext.request.contextPath}/front/about">关于我们</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">文章分类
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <c:forEach items="${columns}" var="column">
                            <li><a href="${pageContext.request.contextPath}/front/showAllArticlesByColumnId/${column.id}">${column.columnName}</a></li>
                        </c:forEach>
                    </ul>
                </li>
                <li><a href="${pageContext.request.contextPath}/userManager/login">后台管理系统</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="关键字" id="textInput">
                </div>
                <button type="button" class="btn btn-default" id = "queryButton">搜索</button>
            </form>
        </div>
    </div>
</nav>
<article style="padding-top: 50px;">
    <div class="l_box f_l">
        <div class="banner">
            <div id="myCarousel" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                    <li data-target="#myCarousel" data-slide-to="3"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner" >
                    <div class="item active">
                        <img src="${pageContext.request.contextPath}/static/image/we.jpg" alt="First slide" class="center-block" style="width: 670px;height: 280px;">
                        <div class="carousel-caption" style="padding-bottom: 50px;width: 670px;margin-left: -135px;"><strong style="font-size: 30px;color: #fff;">我们</strong></div><br/>
                        <div class="carousel-caption">来自蜗牛之家，享受蜗牛生活。</div>
                    </div>

                    <c:forEach items="${pics}" var="pic">
                        <div class="item">
                            <a href="${pic.picUrl}"><img src="${domain}${pic.picName}" alt="Second slide" class="center-block" style="width: 670px;height: 280px;"></a>
                            <div class="carousel-caption" style="padding-bottom: 50px"><strong style="font-size: 30px;">${pic.picTitle}</strong></div><br/>
                            <div class="carousel-caption">${pic.picDesc}</div>
                        </div>
                    </c:forEach>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="carousel-control left" href="#myCarousel"
                   data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel"
                   data-slide="next">&rsaquo;</a>
            </div>
        </div>
        <!-- banner代码 结束 -->
        <h2 style="font-size: 16px;font-weight: bold;line-height: 36px;color: #333;border-bottom: #db6d4c 4px solid;"><b>文章</b>推荐</h2>
        <div class="topnews" id="blogs" style="margin-bottom: -30px;">

        </div>
        <div style="padding-top: 16px;text-align: center">
            <div id="bottomTab"></div>
        </div>


    </div>
    <div class="r_box f_r">
        <div class="tit01" style="margin-top: -20px;">
            <h3>项目托管于码云,欢迎交流!</h3>
            <div class="gzwm">
                <ul>
                    <li><a href="https://gitee.com/WoNiuShengHuo/article"><img src="${pageContext.request.contextPath}/static/front/images/mayun.png" style="width: 52px;height: 52px;margin-top: -60px;"></a>开源中国</li>
                    <li><a href="https://gitee.com/_swg"><img src="${pageContext.request.contextPath}/static/front/images/swg.png" style="width: 52px;height: 52px;margin-top: -60px;"></a>&nbsp;&nbsp;孙为国</li>
                    <li><a href="https://gitee.com/xujiliang"><img src="${pageContext.request.contextPath}/static/front/images/xjl.png" style="width: 52px;height: 52px;margin-top: -60px;"></a>&nbsp;&nbsp;许吉良</li>
                </ul>
            </div>
        </div>

        <!--tit01 end-->

            <div class="cloud">
                <h3>标签云</h3>
                <ul>
                    <c:forEach items="${columns}" var="column">
                        <li><a href="${pageContext.request.contextPath}/front/showAllArticlesByColumnId/${column.id}">${column.columnName}</a></li>
                    </c:forEach>
                </ul>
            </div>


        <div class="tuwen">
            <h3>最新文章</h3>
            <ul>
                <c:forEach items="${ads}" var="ad">
                    <li><a href="${pageContext.request.contextPath}/front/detail/${ad.id}"><img src="${domain}${ad.articleImageUrl}" style="width: 70px;height: 70px;"><b style="width: 150px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;">${ad.articleTitle}</b></a>
                        <p><span class="tulanmu"><a href="${pageContext.request.contextPath}/front/showAllArticlesByColumnId/${ad.columnId}">${ad.columnName}</a></span><span class="tutime"><fmt:formatDate value="${ad.createDate}" pattern="yyyy-MM-dd"/></span></p>
                    </li>
                </c:forEach>
            </ul>
        </div>

</article>
<!--r_box end -->
<%--<div id="footer" class="container" style="padding-top: 20px;">
    <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="navbar-inner navbar-content-center">
            <p class="text-muted credit" style="padding: 10px;text-align: center">
                蜗牛之家 2017
            </p>
        </div>
    </nav>
</div>--%>
</body>
</html>

